<!-- traverse.html-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>遍历示例</title>
  <style>
    .ancestors * {
      display: block;
      border: 2px solid lightgrey;
      color: lightgrey;
      padding: 5px;
      margin: 15px;
    }
  </style>
  <script src="jquery-3.6.1.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("span").parent().css({ "color": "red", "border": "2px solid red" });
    });
  </script>
</head>

<body>

  <div class="ancestors">
    <div style="width:500px;">div (曾祖父元素)
      <ul>ul (祖父元素)
        <li>li (父元素)
          <span>span</span>
        </li>
      </ul>
    </div>

    <div style="width:500px;">div (祖父元素)
      <p>p (父元素)
        <span>span</span>
      </p>
    </div>
  </div>

</body>

</html>